<?xml version="1.0" encoding="UTF-8"?>
<!--
[LOGIN]
Auteur : Adrien Boisson
Version : 1.0.0
Vue d'authentification des utilisateurs afin de pouvoir accéder à internet.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"> 
      <h:head>
        <f:event type="preRenderView" listener="#{configurationBean.verificationInstallation()}" />
        <f:event type="preRenderView" listener="#{loginBean.redirect()}" />
        <title>Portail d'authentification - Mahum Logs</title>
        <meta name="viewport" content="width=device-width"/>
        <style media="screen">
            html {
                height: 100%;
            }

            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #page-table {
                height: 50%;
                width: 100%;
                border-collapse: collapse;
                text-align: center;
            }

            #page-td {
                height: 100%;
                padding: 0;
                vertical-align: middle;
            }

            div#global {
                width: 500px;
                margin: 20px auto;
                text-align: left;
            }

            #page-table {
                color: white;
            }

            #page-table a {
                color: white;
            }

            div#global {
                padding: 10px 20px;
                font-family: Arial, Helvetica, sans-serif;
            }

            div#global h1 {
                font-size: 1.4em;
            }

            div#global h2 {
                font-size: 1.1em;
            }

            div#global p, div#global ul {
                font-size: .9em;
            }
	</style>
        <style type="text/css">
            body {
                background: url("resources/img/background.jpg") fixed;
            }
            
            header img {
                display: block;
                margin: 0 auto;
                width: 400px;
                height: 209px;
                padding-top: 30px;
            }
            
            .form-login {
                max-width: 440px;
                display: block;
                margin: 0 auto;
            }
            
            .form-login .form-login-heading,
            .form-login .checkbox {
                margin-bottom: 10px;
            }
            
            .form-login .checkbox {
                font-weight: normal;
            }
            
            .form-login .form-control {
                position: relative;
                font-size: 16px;
                height: auto;
                padding: 10px;
                -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                        box-sizing: border-box;
            }
            
            .form-login .form-control:focus {
                z-index: 2;
            }
            
            .form-login input[type="text"] {
                margin-bottom: -1px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
            
            .form-login input[type="password"] {
                margin-bottom: 10px;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
            
            .form-login button {
                float: right;
            }     
        </style>
    </h:head>
    <h:body>
        <p:growl id="growl" autoUpdate="true"/>
        <header>
            <img src="resources/img/logo.png" />
        </header>
        <table id="page-table">
            <tr>
                <td id="page-td">
                    <div id="global">
                        <h:form id="login" styleClass="form-login">
                            <p:growl id="growl" showDetail="true" sticky="40000" />            
                            <p:panelGrid columns="2">
                                <f:facet name="header">  
                                    Authentification
                                </f:facet>  
                                <h:outputLabel for="username" value="Nom d'utilisateur * :" />  
                                <p:inputText id="username" value="#{loginBean.login}" required="true" label="Nom d'utilisateur"/>  

                                <h:outputLabel for="password" value="Mot de passe * :" />  
                                <p:inputText id="password" type="password" value="#{loginBean.password}" required="true" label="Mot de passe"/>  

                                <f:facet name="footer">  
                                    <p:commandButton value="Connexion" ajax="true" icon="ui-icon-check" action="#{loginBean.connection()}" update="growl" />  
                                </f:facet>
                            </p:panelGrid>            
                        </h:form>
                    </div>
                </td>
            </tr>
        </table> 
    </h:body>
</html>
